<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link href="/semantic-ui/semantic.min.css" rel="stylesheet">
  <link href="/editormd/css/editormd.min.css" rel="stylesheet">
  <link href="/stylesheets/docs.css" rel="stylesheet">
  <title><%= doc.title %> - 学乎</title>
</head>
<body>
<form action="/docs<%= doc._id ? '/' + doc._id : '' %>" method="post">
  <header id="header" class="ui vertical segment zoomed">
    <div class="ui stackable very relaxed two column grid container">
      <a class="ui left teal massive corner label" title="Git仓库" target="_blank"
         href="https://coding.net/u/backflow/p/api-doc/git"><i class="github icon"></i></a>
      <div class="center aligned column">
        <h1 class="ui icon header">
          <img src="/images/icons/theming_reverse.png" class="ui icon image">Xuehu API Documentation
        </h1>
        <p>《学乎》平台的API/文档管理系统，通过<a href="/syntax" target="_blank">Markdown语法</a>
          您可以快速、方便的完成文档的设计与书写。</p>
      </div>
      <div class="left aligned column ui form">
        <span class="field"><input name="title" value="<%= doc ? doc.title : '' %>" placeholder="文档名称"
                                   autocomplete="off"></span>
        <div class="ui divider"></div>
        <div class="ui labeled icon dropdown button">
          <i class="file text icon"></i><span class="text">插入模板</span>
          <div class="menu">
            <div class="item" data-value="docs.md"><i class="file text outline icon"></i>API接口模板</div>
            <div class="item" data-value="table.md"><i class="file table icon"></i>数据表结构</div>
            <div class="item" data-value="json" data-content="选中或输入文本进行转换"><i class="code icon"></i>JSON转换表格</div>
          </div>
        </div>
        <div class="ui buttons right floated">
          <a href="/" class="ui button">取消</a>
          <div class="or"></div>
          <button class="ui positive button active" type="submit">保存</button>
        </div>
      </div>
    </div>
  </header>
  <div class="ui vertical segment docs" id="editormd" style="padding: 0">
    <textarea name="content" title="Markdown content" style="display:none"><%= doc ? doc.content : '' %></textarea>
  </div>
</form>
<script src="/javascripts/jquery.min.js"></script>
<script src="/editormd/editormd.min.js"></script>
<script src="/semantic-ui/semantic.min.js"></script>
<script>
  var $header = $('#header');
  var form = document.forms[0];
  var editor = editormd('editormd', {
    path: '/editormd/lib/',
    syncScrolling: 'both',
    sequenceDiagram: true,
    flowChart: true,
    width: '100%',
    height: 720
  });

  $('.menu .item').popup({
    hoverable: true,
    position: 'bottom left'
  });

  $('.ui.dropdown').dropdown({
    action: 'hide',
    onChange: function (value, text, $choice) {
      if (value == 'json') {
        // load and execute plugin
        return editor.executePlugin("jsonToTableDialog", "json-to-table-dialog/json-to-table-dialog");
      }
      $.get('/documents/temp/' + value).done(function (data) {
        editor.insertValue(data)
      });
    }
  });

  $(form).form({
    inline: true,
    fields: {
      title: {
        rules: [{type: 'empty', prompt: '请输入文档名称'}]
      }
    },
    onSuccess: function () {
      var content = form.content.value;
      if (!content.trim) {
        return alert('请输入文档内容')
      }
    }
  })
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function introduction() {
    var background = 'bg' + getRandomInt(1, 14);
    $header.addClass(background).removeClass('zoomed');
  }

  $(function () {
    introduction();
  })
</script>
</body>
</html>